<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="20" type="flex">
        <el-col :span="10">
          <NewCard :title="$route.mete.title" isright="isright">
            <template slot="right">
              <div class="search">
                <el-input
                  placeholder="请输入您要搜索的问题"
                  v-model="inputValue"
                >
                  <el-button
                    icon="el-icon-search"
                    slot="suffix"
                    circle
                  ></el-button>
                </el-input>
              </div>
            </template>
            <div class="issuesList">
              <el-collapse v-model="activeName" accordion>
                <el-collapse-item
                  :title="iss.title"
                  :name="index"
                  v-for="(iss, index) in issuesList"
                  :key="iss.id"
                >
                  <div>
                    <span v-html="iss.content"></span>
                    <a @click="handlerIssues(iss)">阅读原文</a>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </NewCard>
        </el-col>
        <el-col :span="14">
          <Details :selectIss="selectIss"></Details>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import Details from "./details.vue";
import NewCard from "@/wss/components/newCard.vue";
export default {
  name: "AccountProblem",
  components: { NewCard, Details },
  data() {
    return {
      isright: true, //显示搜索框
      inputValue: "", //搜索框输入的值
      activeName: 0, //默认展示的面板
      issuesList: [
        {
          id: "1",
          title: "号码停用/遗失/注销，无法接收验证码/更换手机号码怎么办？",
          content: `
              <p>1、手机号码不用及时注销</p>
              <p>有些朋友在更换手机号码时直接把老的手机卡弃之不管，认为只要不用了就会自动关闭注销。事实上，虽然会自动注销，但是会耗费几个月的时间，在这段时间内，系统会自动扣除每个月的月租费，直到注销为止。手机与用户的信用度相连，为了以后的业务或者银行业务，请及时注销。</p>
              <p>2、更改银行卡绑定</p>
              <p>手机号码发生更改后，需尽快修改与之绑定的各种银行卡、信用卡密码。也可以登录网银修改网银账号资料，更换手机号码。已经停机销号的只能带银行卡和身份证到银行营业厅办理。</p>
              <p>3、更改QQ号、微信绑定</p>
              <p>许多人通过手机号直接登录QQ和微信。建议更改手机号码前，在网上完成重新绑定。</p>
            `,
        },
        {
          id: "2",
          title: "如何更改手机号？",
          content: `
              <p>1、如何更改手机号？</p>
              <p>有些朋友在更换手机号码时直接把老的手机卡弃之不管，认为只要不用了就会自动关闭注销。事实上，虽然会自动注销，但是会耗费几个月的时间，在这段时间内，系统会自动扣除每个月的月租费，直到注销为止。手机与用户的信用度相连，为了以后的业务或者银行业务，请及时注销。</p>
              <p>2、更改银行卡绑定</p>
              <p>手机号码发生更改后，需尽快修改与之绑定的各种银行卡、信用卡密码。也可以登录网银修改网银账号资料，更换手机号码。已经停机销号的只能带银行卡和身份证到银行营业厅办理。</p>
              <p>3、更改QQ号、微信绑定</p>
              <p>许多人通过手机号直接登录QQ和微信。建议更改手机号码前，在网上完成重新绑定。</p>
            `,
        },
        {
          id: "3",
          title: "如何解绑手机？",
          content: `
              <p>1、如何解绑手机？</p>
              <p>有些朋友在更换手机号码时直接把老的手机卡弃之不管，认为只要不用了就会自动关闭注销。事实上，虽然会自动注销，但是会耗费几个月的时间，在这段时间内，系统会自动扣除每个月的月租费，直到注销为止。手机与用户的信用度相连，为了以后的业务或者银行业务，请及时注销。</p>
              <p>2、更改银行卡绑定</p>
              <p>手机号码发生更改后，需尽快修改与之绑定的各种银行卡、信用卡密码。也可以登录网银修改网银账号资料，更换手机号码。已经停机销号的只能带银行卡和身份证到银行营业厅办理。</p>
              <p>3、更改QQ号、微信绑定</p>
              <p>许多人通过手机号直接登录QQ和微信。建议更改手机号码前，在网上完成重新绑定。</p>
            `,
        },
      ],
      selectIss: {},
    };
  },
  mounted() {
    this.selectIss = this.issuesList[0]; //默认选中第一条问题
  },
  methods: {
    //单击阅读原文
    handlerIssues(iss) {
      this.selectIss = iss;
    },
  },
};
</script>

<style scoped>
/* 高度 */
::v-deep .label-box-content,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col > div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body {
  height: 100%;
}
::v-deep .el-card__body {
  position: relative;
  padding: 0 0 30px 0;
}
::v-deep .el-card__body .top {
  margin-left: 30px;
  margin-right: 30px;
}
::v-deep .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .label-box-content .el-card__body > div::-webkit-scrollbar {
  width: 0px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 搜索 */
::v-deep .search .el-input__inner {
  border-radius: 18px;
}
.search .el-button {
  border: 0;
  margin-top: 4px;
  padding: 6px;
  font-size: 16px;
}

/* 问题列表 */
.issuesList .el-collapse {
  border: 0;
}
.issuesList .el-collapse-item {
  padding: 0 30px;
}
.issuesList >>> .el-collapse-item__wrap,
.issuesList >>> .el-collapse-item__header {
  background-color: transparent !important;
}
.issuesList >>> .el-collapse-item__header {
  font-weight: bold;
  font-size: 16px;
  height: auto;
  padding: 11px 0;
}
.issuesList >>> .el-collapse-item__content > div > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.issuesList >>> .el-collapse-item__content > div > span p {
  margin: 0;
  display: inline;
}
.issuesList >>> .el-collapse-item__content > div > a {
  color: #39486f;
}

.issuesList >>> .el-collapse-item__header.is-active {
  padding-bottom: 0;
  line-height: 36px;
}
.issuesList .el-collapse-item:hover,
.issuesList .el-collapse-item.is-active,
.issuesList >>> .el-collapse-item__header.is-active {
  background-color: #f4f5f8;
}
</style>
